<template>
  <div class="mpvue-picker">
    <div :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></div>
    <div class="mpvue-picker-content" :class="{'mpvue-picker-view-show':showPicker}">
      <div class="mpvue-picker__hd" catchtouchmove="true">
        <div class="mpvue-picker__action" @click="pickerCancel">取消</div>
        <div class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</div>
      </div>
      <picker-view
        indicator-style="height: 40px;"
        class="mpvue-picker-view"
        :value="pickerValue"
        @change="pickerChange"
      >
        <block>
          <picker-view-column>
            <div
              class="picker-item"
              v-for="(item,index) in commonDataList"
              :key="index"
            >{{item.label}}</div>
          </picker-view-column>
        </block>
      </picker-view>
    </div>
  </div>
</template>

<script>
import commonData from "@/common/data.js";
import moment from "moment";
/**
 * 下拉选择公共组件
 * @property {String} themeColor 主题色
 * @property {Array} pickerValueDefault 弹出时默认显示的省，市，区
 */
export default {
  data() {
    return {
      pickerValue: [0],
      pickObj: {},
      commonDataList: [],
      /* 是否显示控件 */
      showPicker: false,
      addDate: [],
      deleteDate: []
    };
  },
  created() {
    this.getdateDate();
  },
  props: {
    /* 默认值 */
    pickerValueDefault: {
      type: Array,
      default() {
        return [0];
      }
    },
    /* 主题色 */
    themeColor: String,
    isFlag: String
  },
  watch: {
    pickerValueDefault: "init",
    isFlag: "getdata"
  },
  methods: {
    getdateDate() {
      let arr = [0, 1, 2, 3, 4, 5, 6];
      let date = "";
      let date2 = "";
      arr.forEach(e => {
        date = moment()
          .add(e, "years")
          .format("YYYY");
        date2 = moment()
          .subtract(e, "years")
          .format("YYYY");
        let obj = {
          label: date,
          value: date
        };
        let obj2 = {
          label: date2,
          value: date2
        };
        this.addDate.push(obj);
        this.deleteDate.push(obj2);
      });
    },
    getdata() {
      // isFlag 为 type==index 格式  取出commonData里面有的对应内容
      let type = this.isFlag.split("==")[0];
      if (commonData[type]) {
        this.commonDataList = commonData[type];
        this.handPickValueDefault(commonData[type]);
      } else if (type === "rxsj") {
        // 入学时间
        this.commonDataList = this.deleteDate;
        this.handPickValueDefault(this.deleteDate); // 边界处理 超出的时候取数组长度-1
      } else if (type === "ygbysj") {
        this.commonDataList = this.addDate;
        this.handPickValueDefault(this.addDate); // 边界处理 超出的时候取数组长度-1
      }
    },
    init() {
      this.pickerValue = this.pickerValueDefault;
    },
    show() {
      setTimeout(() => {
        this.showPicker = true;
      }, 0);
    },

    showBack(flag, code) {
      this.commonDataList = commonData[flag];
      if(flag=='profession'){
        this.commonDataList=this.commonDataList.concat(commonData.professionAll)
      }
      if (flag === "rxsj") {
        // 入学时间
        this.commonDataList = this.deleteDate;
      } else if (flag === "ygbysj") {
        this.commonDataList = this.addDate;
      }
      if (this.commonDataList && this.commonDataList.length) {
        this.commonDataList.forEach(item => {
          if (item.value == code) {
            let obj = {
              label: item.label,
              value: item.value,
              flag: flag
            };
            this.$emit("onConfirm", obj);
          }
        });
      }
    },
    maskClick() {
      this.pickerCancel();
    },
    pickerCancel() {
      this.showPicker = false;
      this._$emit("onCancel");
    },
    pickerConfirm(e) {
      if (this.pickObj.value == "MORE") {
        this.pickerValue = [0];
        this.pickObj.value = '';
        this.commonDataList = commonData.professionAll;
      } else {
        this._$emit("onConfirm");
        this.showPicker = false;
        this.commonDataList = [];
      }
    },
    showPickerView() {
      this.showPicker = true;
    },
    handPickValueDefault(parms) {
      if (this.pickerValueDefault !== [0]) {
        if (this.pickerValueDefault[0] > parms.length - 1) {
          this.pickerValueDefault[0] = parms.length - 1;
        }
      }
    },
    pickerChange(e) {
      let changePickerValue = e.mp.detail.value;
      this.pickerValue = changePickerValue;
      this._$emit("onChange");
    },
    _$emit(emitName) {
      this.pickObj = {
        label: this._getLabel(),
        value: this._getValue(),
        flag: this.isFlag
      };
      // console.log(this.pickObj,'pickObj')
      this.$emit(emitName, this.pickObj);
    },
    _getValue() {
      if (this.commonDataList.length != 0) {
        let pcikerValue = this.commonDataList[this.pickerValue[0]].value;
        return pcikerValue;
      }
    },
    _getLabel() {
      if (this.commonDataList.length != 0) {
        let pcikerLabel = this.commonDataList[this.pickerValue[0]].label;
        return pcikerLabel;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.pickerMask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.mpvue-picker-content {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: all 0.3s ease;
  transform: translateY(100%);
  z-index: 3000;
}

.mpvue-picker-view-show {
  transform: translateY(0);
}

.mpvue-picker__hd {
  display: flex;
  padding: 0px 15px;
  background-color: #fff;
  position: relative;
  text-align: center;
  font-size: 17px;
}

.mpvue-picker__hd:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #e5e5e5;
  color: #e5e5e5;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
}

.mpvue-picker__action {
  display: block;
  flex: 1;
  color: #0366d6;
  padding: 20rpx 0;
}

.mpvue-picker__action:first-child {
  text-align: left;
  color: #888;
}

.mpvue-picker__action:last-child {
  text-align: right;
}

.picker-item {
  text-align: center;
  line-height: 40px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}

.mpvue-picker-view {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 238px;
  background-color: #fff;
}
</style>
